<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample Spring Data Binding</title>
<style type="text/css">
.number-field {text-align:right;}
.link-button  {text-decoration:none;cursor:pointer;}
#statusBar    {width:100%;height:15px;font-size:12px;padding:1px;border:1px solid #999;background-color:#DDD;}
</style>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.7.min.js' />"></script>
<script type="text/javascript">
$(function(){
	//<c:forEach var="err" items="${errs}" varStatus="vs">
	//<c:if test="${vs.index==0}">
		$("input[name='${err.field}']").focus();
		$("#statusBar").html("您輸入的資料有誤！請再次確認。");
	//</c:if>
	$("input[name='${err.field}']").css("border","1px solid red");
	//</c:forEach>
});
function addUser() {
	$("#dataTable tbody").append("<tr> \
									<td><input name=\"users[100].name\" size=\"10\" /></td> \
									<td><input name=\"users[100].age\" class=\"number-field\" size=\"3\" /></td> \
									<td>&nbsp;<a class=\"link-button\" onclick=\"removeUser(this)\">[-]</a>&nbsp;</td> \
								</tr>");
	reSort();
}
function reSort() {
	var trs = $("#dataTable tbody tr");
	var tr;
	var inputs;
	for(var i=0,len=trs.size();i<len;i++) {
		tr = trs.eq(i);
		inputs = tr.find("input");
		inputs.eq(0).attr("name","users["+i+"].name");
		inputs.eq(1).attr("name","users["+i+"].age");
	}
}
function removeUser(sender) {
	sender = $(sender);
	sender.parents("tr").remove();
	reSort();
}
</script>
</head>
<body>
<div id="statusBar">&nbsp;</div>
<form:form method="post" commandName="command">
<table id="dataTable" rules="all" border="1">
	<caption>
		人員 <a class="link-button" onclick="addUser()">[+]</a>
	</caption>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${command.users}" varStatus="vs">
			<tr>
				<td><form:input path="users[${vs.index}].name" size="10" /></td>
				<td><form:input path="users[${vs.index}].age" class="number-field" size="3" /></td>
				<td>&nbsp;<a class="link-button" onclick="removeUser(this)">[-]</a>&nbsp;</td>
			</tr>
		</c:forEach>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="3" align="center">
				<input type="submit" value="送出" />
			</td>
		</tr>
	</tfoot>
</table>
</form:form>
</body>
</html>